﻿
@{
    ViewBag.Title = "RoleControl";
    Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}
<link href="~/Content/css/MenuTree.css" rel="stylesheet" />
<style type="text/css">
	ul{
		width: 150px;
		overflow: hidden;
	}
	li{
		list-style: none;
		float: left;
		width: 100%;
		font-size:15px;
		line-height: 30px;
	}
	.menu-second{
		padding-left: 30px;
		line-height: 30px;
	}
	.second_menu_div{
		width: 100%;
		float: left;
	}
</style>
<span class="layui-breadcrumb">
    <a>系统设置</a>
    <a>角色管理</a>
    <a><cite>菜单权限</cite></a>
</span>
<hr />
<div id="menu" class="menu-container">
	<ul>
		<li>
			<div class="menu-first" data-id="1">
				<i class="layui-icon show_or_hide_first"  data-show="true">+</i>
				<input type="checkbox" data-check="false" data-id="1" class="menu_check"/>
				<span>一级</span>
			</div>
			<div class="menu-second" data-id="2" data-parentid="1">
				<div class="second_menu_div">
					<input type="checkbox" data-check="true" data-id="001" class="menu_check_second"/>
					<span>二级</span>
				</div>
				<div class="second_menu_div">
					<input type="checkbox" data-check="true" data-id="002" class="menu_check_second"/>
					<span>二级</span>
				</div>
				
			</div>
		</li>
		<li>
			<div class="menu-first" data-id="2">
				<i class="layui-icon show_or_hide_first"  data-show="true">+</i>
				<input type="checkbox" data-check="false" data-id="2" class="menu_check"/>
				<span>一级</span>
			</div>
			<div class="menu-second" data-id="4" data-parentid="2">
				<div class="second_menu_div">
					<input type="checkbox" data-check="true" data-id="011" class="menu_check_second"/>
					<span>二级</span>
				</div>
				<div class="second_menu_div">
					<input type="checkbox" data-check="true" data-id="012" class="menu_check_second"/>
					<span>二级</span>
				</div>
								
			</div>
			
		</li>
	</ul>
	
	
</div>
<script src="js/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
<script>
	(function(){
		$(".show_or_hide_first").on("click",function(){		
			var navId = $(this).parent().data("id")
			if($(this).data("show")==="true"){
				console.log($(this).data("show"))
				//展开>>收起
				$(".menu-second[data-parentid=" + navId + "]").show();
				$(this).html("+")
				$(this).data("show","false")
			}else{				
				//收起>>展开
				$(".menu-second[data-parentid=" + navId + "]").hide();
				$(this).html("-")
				$(this).data("show","true")
			}	
		})
		$(".menu_check").on("click",function(){
			var navId = $(this).parent().data("id")	
			console.log($(this).attr("data-check"))
			if($(this).attr("data-check")==="true"){
				//全选>>全取消			
				$(this).attr("data-check","false");
				$(".menu-second[data-parentid=" + navId + "]").find('.menu_check_second').each(function(){
					$(this)[0].checked = false;
					$(this)[0].dataset["check"]="true";
				})
				
			}else{
				//全取消>>全选
				$(this).attr("data-check","true");				
				$(".menu-second[data-parentid=" + navId + "]").find('.menu_check_second').each(function(){
					$(this)[0].checked = true;
					$(this)[0].dataset["check"] = "false";
				})
			}	
		})
		$(".menu_check_second").on("click",function(){
			var parentId = $(this).parent().parent().data("parentid");
			console.log(parentId)
			var silingBox = $(this).parent().parent().find(".menu_check_second");
			var isCheckAll = true;
			if($(this)[0].dataset["check"] === "true") {
				console.log($(this))
				//选中>>取消				
				$(this)[0].dataset["check"] = "false";
			} else {
				//取消>>选中
				$(this)[0].dataset["check"]="true";
				
			}
			//判断当前的兄弟选择是否都已经选择
			for(var i=0;i<silingBox.length;i++){					
				if($(silingBox[i])[0].dataset["check"]=="true"){
					isCheckAll = false
					break;
				}
			}
			if(isCheckAll){
				console.log($(".menu_check[data-id=" + parentId + "]"))
				$(".menu_check[data-id=" + parentId + "]").attr('data-check',"true");				
				$(".menu_check[data-id=" + parentId + "]")[0].checked = true;
			}else{
				
				$(".menu_check[data-id=" + parentId + "]").attr('data-check',"false");
				$(".menu_check[data-id=" + parentId + "]")[0].checked = false;
			}
		})
	})()
</script>